<template>
  <el-dialog
      v-model="diaVisible"
      title="编辑"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="660px"
      class="edit-lamp"
      @close="cancelHandle"
  >
    <div class="lamp-box">
      <!--  灯具控制员、灯具维修员 开启/关闭 -->
      <template v-if="userInfo.role == 1 || userInfo.role == 2">
        <div class="item" v-for="(item,idx) in lampMenu" :class="{'on': currIdx == idx}"
             @click="changeLamp(item,idx)">
          {{ item.nameAll }}
        </div>
      </template>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <div @click="submitForm" class="sure-btn" style="margin-right: 10px">确认</div>
        <div @click="cancelHandle" class="cancel-btn">取消</div>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {sendCommandLightMsg, UpdateLightFact, updateLightType} from "../../router/api.js";

import img1 from '../../assets/images/img-icon25.svg';
import img2 from '../../assets/images/img-icon26.svg';
import img3 from '../../assets/images/img-icon27.svg';
import {mapGetters} from "vuex";

export default {
  name: "editLamp",
  computed: {
    ...mapGetters(['userInfo']),
  },
  data() {
    return {
      diaVisible: false,
      lampMenu: [
        {name: '灯具开启', nameAll: '灯具全开启', value: 1, url: img1},
        {name: '灯具关闭', nameAll: '灯具全关闭', value: 2, url: img2},
      ],
      switchVal: '',
      currIdx: -1,
      currOpt: {},
      currItem: {},
      currStr: '',
    }
  },
  props: {
    mappingData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    show(opt, item, str) {
      this.diaVisible = true;
      this.currOpt = opt;
      this.currItem = item;
      this.currStr = str || '';
    },
    changeLamp(item, idx) {
      this.currIdx = idx;
    },
    submitForm() {
      let gatewayName = '', topic = '';
      let bridgeGatewaylistData = [];
      let is = Array.isArray(this.currItem.gatewaylist);
      if (is) {
        //灯桥
        if(this.currStr == 'bridge'){
          bridgeGatewaylistData = this.setBridgeData()
        }
      } else {
        // 灯塔
        gatewayName = this.currItem.gatewaylist.gatewayName;
        topic = this.currItem.gatewaylist.subTopic;
      }
      let lamp = 'all';
      if(this.currStr == 'bridge'){
        for(let i = 0; i < bridgeGatewaylistData.length; i++){
          let o = bridgeGatewaylistData[i];
          this.lampStatusHandle({
            gatewayName:o.gatewayName,
            topic:o.subTopic,
            lamp, o})
        }
      }else{
        this.lampStatusHandle({gatewayName, topic, lamp})
      }
    },
    lampStatusHandle({gatewayName, topic, lamp, o}) {
      let action = this.currIdx == 1 ? 0 : 1;
      let commandMegStr = {};
      if(this.currStr == 'bridge'){
        gatewayName = o.gatewayName;
        topic = o.subTopic;
        o.lightList.forEach(v => {
          commandMegStr[v.lightnameFact] = action;
        })
      }else{
        let arr = this.currItem.lightList.filter(o => o.lightType == 1);
        arr.forEach(o => {
          let _lightnameFact = null;
          if (o.lightnameFact) _lightnameFact = o.lightnameFact;
          commandMegStr[_lightnameFact] = action;
        })
      }

      sendCommandLightMsg({
        gatewayName,
        topic,
        lamp,
        action,
        commandMegStr
      }).then(res => {
        this.successHandle(res)
      })
    },
    setBridgeData(){
      let arr = this.currItem.lightList.filter(opt => opt.lightType == 1);
      let gatewaylist = JSON.parse(JSON.stringify(this.currItem.gatewaylist));
      arr.forEach(opt => {
        let val = gatewaylist.find(o => o.gatewayId == opt.gatewayId);
        if(!val['lightList']){
          val['lightList'] = []
        }
        val['lightList'].push(opt);
      })
      return gatewaylist
    },
    successHandle(res) {
      if (res.data.code == 200) {
        this.currIdx = -1;
        this.switchVal = ''
        this.diaVisible = false;
        // this.$message.success(res.data.msg);
        this.$emit('saveOk');
      } else {
        // this.$message.warning(res.data.msg);
      }
    },
    cancelHandle() {
      this.diaVisible = false;
      this.currIdx = -1;
      this.switchVal = '';
    }

  }
}
</script>

<style scoped lang="scss">
.lamp-box {
  display: flex;
  justify-content: center;
  margin-top: 30px;

  .item {
    height: 42px;
    line-height: 42px;
    background: #E1E5EA;
    border: 1px solid #CED4D7;
    font-size: 18px;
    font-weight: 400;
    color: #336666;
    margin-right: 10px;
    padding: 0 16px;
    border-radius: 4px;
    cursor: pointer;

    &.on, &:hover {
      background: #3CBCFF;
      border-color: #3CBCFF;
      color: #fff;
    }

    &:nth-child(1), &:nth-child(2), &:nth-child(3) {
      &:before {
        content: '';
        width: 17px;
        height: 17px;
        display: inline-block;
        margin-right: 6px;
        vertical-align: middle;
      }
    }

    &:nth-child(1) {
      &:before {
        background: url("@/assets/images/img-icon25.svg") no-repeat left top;
        background-size: 100% 100%;
      }

      &:hover, &.on {
        &:before {
          background: url("@/assets/images/img-icon29.svg") no-repeat left top;
          background-size: 100% 100%;
        }
      }
    }

    &:nth-child(2) {
      &:before {
        background: url("@/assets/images/img-icon26.svg") no-repeat left top;
        background-size: 100% 100%;
      }

      &:hover, &.on {
        &:before {
          background: url("@/assets/images/img-icon28.svg") no-repeat left top;
          background-size: 100% 100%;
        }
      }
    }

    &:nth-child(3) {
      margin-right: 0;

      &:before {
        background: url("@/assets/images/img-icon27.svg") no-repeat left top;
        background-size: 100% 100%;
      }

      &:hover, &.on {
        &:before {
          background: url("@/assets/images/img-icon30.svg") no-repeat left top;
          background-size: 100% 100%;
        }
      }
    }
  }

}

.sel {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 30px;

  .sel-light{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .txt {
    width: 170px;
    font-size: 18px;
    font-weight: 400;
    color: #336666;

    .iconfont {
      color: #3CBDFF;
      margin-right: 6px;
    }
  }

  :deep(.el-select) {
    width: 234px;
  }
}

</style>
<style lang="scss">
.edit-lamp {
  .el-dialog__header {
    background: url("@/assets/images/img-title-b.png") no-repeat left top !important;
    background-size: 100% 100% !important;
  }
}
</style>
